{{extend "ui_demo_layout.html"}}

{{block sidemenu}}
{{<< sidemenu('UIMENU', 'ag-grid', 'remote')}}
{{end}}

{{block content_header_title}}
  <h1>后台读取表格示例
    <small>ag-grid</small>
  </h1>
</h1>
{{end}}

{{block content_header_breadcrumb}}
  <ol class="breadcrumb">
    <li><a href="/ui">UI DEMO</a></li>
    <li>Ag-Grid后台读取示例</li>
  </ol>
{{end}}

{{block content_main}}

<!-- 引入 ui.ag-grid -->
{{use "ui.ag-grid"}}
<!-- 引入 grid.js (包含ag-grid tag)-->
{{link "modules/ag-grid/tags/grid.js"}}
<!-- 引入查询条件 -->
<script src="{{=url_for_static('query_condition.js')}}"></script>

<query-condition></query-condition>

<div class="tools">
  <a class="btn btn-flat btn-primary btn-sm" href="/func/add"><i class="fa fa-plus"></i> 新增</a>
</div>
<ag-grid></ag-grid>
<div class="clearfix tools">
  <div class="pull-right">
    <button class="btn btn-flat btn-primary btn-sm">上传</button>
    <button class="btn btn-flat btn-info btn-sm">下载</button>
  </div>
  <div id="pagination" class="pull-left"></div>
</div>

<script>
    var gridOptions = {
        columnDefs: {{<< json_dumps(table.table_info['fields_list'])}},
        //rowData: rowData

        //以下几个是用于分页的配置项
        total: {{=total}},
        pageRows: 2,
        //pagination: '#pagination
        url: "{{<< functions.request_url()}}"

    };

    riot.mount('ag-grid', {options:gridOptions})

    var query = {{<< json_dumps(query_form)}}
    riot.mount('query-condition', query)

</script>
{{end}}
